<template>
  <div class="page_box">
    <window-title title="签到列表">
      <!-- <el-button
        size="mini"
        style="float:right"
        class="com-btn"
        icon="el-icon-back"
        @click="back()"
      >返回</el-button> -->
    </window-title>
    <el-tabs v-model="activeName" >
      <el-tab-pane name="0">
        <span slot="label">
          全部
          <span class="tab-badge">{{all}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          已签到
          <span class="tab-badge">{{check_real}}</span>
        </span>
      </el-tab-pane>
    </el-tabs>
    <el-table size="small" :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}" border :data="list.data">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="组别" prop="team_name">
        <template slot="header">
          <el-dropdown size="mini"  @command="changeTeam"  style="padding-top:5px;">
            <span class="el-dropdown-link" style="font-weight:normal;font-size:12px;">
              {{group_id == 0 ? '组别' : team_list[group_index].name}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,key) in team_list" :key="key" :command="item.id">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <!-- <el-table-column label="金额" prop="total_price"></el-table-column> -->
      <el-table-column label="数字票码" prop="code"></el-table-column>
      <el-table-column label="状态" width="80px">
        <template slot-scope="item">
          <el-tag size="mini" type="danger" v-if="item.row.checked == 0">未签到</el-tag>
          <el-tag size="mini" type="success" v-if="item.row.checked == 1">已签到</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="验票时间" prop="sign_time" width="150px"></el-table-column>
      <el-table-column label="来源">
        <template slot-scope="item">
          <el-tag v-if="item.row.source == 1" size="small" type="success">小程序</el-tag>
          <el-tag v-if="item.row.source == 2" size="small" type="success">H5</el-tag>
          <el-tag v-if="item.row.source == 3" size="small" type="success">团报</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";

export default {
  props: { active_id: {} },
  components: { windowTitle },
  data() {
    return {
      activeName: "0",
      list: {
        current_page: 1,
         per_page:10,
        total:20,
        data: [
          {
            name:'wf',
            phone:'fsdf',
            team_name:'顺丰寄付',
            code:214,
            checked:0,
            source:1
          }
        ]
      },
      all: 0,
      check_real: 0,
      load: true,
      group_id: 0,
      group_index : 0,
      team_list: [
        { name:'顺丰寄付',id:1},
        { name:'违反',id:2}
      ]
    };
  },
  mounted() {

  },
  methods: {
    //改变组别
    changeTeam(e){
      console.log(e)
      this.group_id = e;

      for(var i in this.team_list){
        if(this.team_list[i].id == e) this.group_index = i;
      }
      console.log(this.group_index)
      console.log(this.team_list[this.group_index].name)
    },
    // //获取活动组别信息
    // getTeamInfo() {
    //   this.ajaxs("active/getTeamInfo", {
    //     data: { active_id: this.active_id },
    //     success: res => {
    //       this.team_list = res.msg;
    //       this.team_list.unshift({name : '全部' , 'id' : 0});
    //     }
    //   });
    // },
    // changePage(e) {
    //   this.list.current_page = e;
    //   this.getData();
    // },
    // //返回
    // back() {
    //   this.$emit("back");
    // },
    // //获取数据
    // getData() {
    //   this.load = true;
    //   this.ajaxs("activesign/signList", {
    //     data: {
    //       active_id: this.active_id,
    //       page: this.list.current_page,
    //       activeName: this.activeName,
    //       group_id : this.group_id
    //     },
    //     success: res => {
    //       console.log(res);
    //       this.list = res.msg.list;
    //       this.all = res.msg.all;
    //       this.check_real = res.msg.check_real;
    //       this.load = false;
    //     }
    //   });
    // },
    // //切换TAB
    // handleClick() {
    //   this.list.current_page = 1;
    //   this.getData();
    // }
  }
};
</script>

<style>
</style>